<template>
	<view class="pageBgV">
		<u-navbar :bgColor="bgColor" title=" " @leftClick="onBackClick" :titleStyle="titleStyle" leftIconColor="#E6A5B4">

		</u-navbar>
		<map style="top: 0; position: sticky; width: 100%; height: 50vh;" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="onMarkClick">
		</map>
		<view class="centV">
			<view v-if="!isCurrent" class="itemV" v-for="(item,index) in shopList" @click="onItemClick(item)">
				<image class="itemIv" :src="item.logo" mode="aspectFill"></image>
				<view class="itemRightV">
					<view class="itemRightVV">
						<text class="itemTv1">{{item.name}}</text>
						<!-- <image class="itemCollection" src="../../static/public/collection.svg"></image> -->
					</view>
					<view class="itemAddressV">
						<text class="itemAddressTv1">{{item.distance}}</text>
						<text class="itemAddressTv2">{{item.address}}</text>
					</view>
				</view>
			</view>
			
			<view v-if="isCurrent" class="listItemV">
				<swiper :current="mCurrent" @change="onChange" previous-margin="20" next-margin="20" class="swiperV">
					<swiper-item style="justify-content: center; align-items: center; display: flex;" v-for="(item,index) in shopList" @click="onItemToClick(item)">
						<view class="itemToV" >
							<image class="itemToIv" :src="item.logo" mode="aspectFill"></image>
							<text class="itemToTv1">{{item.name}}</text>
							<view class="itemToTvAddress">
								<text class="itemToTv2">{{item.distance}}</text>
								<text class="itemToTv3">{{item.address}}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="backV" @click="isCurrent=false">返回列表</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				image:this.$api.getBaseUrl()+'/uploads/20230731/bf735d090e95dae386008e200c19a135.png',
				imageTo:this.$api.getBaseUrl()+'/uploads/20230731/bf735d090e95dae386008e200c19a135.png',
				bgColor: "#00000000",
				latitude: uni.getStorageSync("user_latitude") ? uni.getStorageSync("user_latitude") : 39.909,
				longitude: uni.getStorageSync("user_longitude") ? uni.getStorageSync("user_longitude") : 116.39742,
				covers: [],
				circles: [],
				shopList: [],
				mCurrent:0,//滑块位置
				isCurrent:false
			}
		},
		onLoad() {
			this.getSeleteShopList();
		},
		methods: {
			onBackClick() {
				let pages = getCurrentPages();
				if (pages[pages.length - 2]) {
					//如果有上一页，就返回上一页
					wx.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/app/Home'
					});
				}
			},
			getSeleteShopList() {
				this.$api.getMapShopList({
					longitude: uni.getStorageSync("user_longitude"),
					latitude: uni.getStorageSync("user_latitude")
				}).then((res) => {
					this.shopList = res.list;
					if(this.shopList.length>0){
						this.latitude = this.shopList[0].latitude;
						this.longitude = this.shopList[0].longitude;
					}
					this.covers = [];
					this.shopList.map((item, index) => {
						let data = {
							id: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							iconPath: item.mpa,
							width: 30,
							height: 30,
							radius: 25,
						}
						this.covers.push(data);
					})
				}).catch((e) => {
					uni.$u.toast("获取门店列表失败");
				})
			},
			onMarkClick(e){
				let id = e.detail.markerId;
				this.covers.map((item,index)=>{
					if(id==item.id){
						this.latitude = item.latitude;
						this.longitude = item.longitude;
						item.width=50;
						item.height = 50;
						// item.iconPath = this.imageTo;
					}else{
						item.width=30;
						item.height=30;
						// item.iconPath= this.image;
					}
				})
				this.shopList.map((item,index)=>{
					if(id==item.id){
						this.mCurrent = index
					}
				})
				this.isCurrent = true;
				console.log("------",e.detail)
			},
			onItemClick(item) {
				this.$u.route({
					url: '/mine/home/FitnessStore',
					params: {
						id: item.id
					}
				})
			},
			onChange(event){
				let pos = event.detail.current;
				this.covers.map((item,index)=>{
					if(this.shopList[pos].id==item.id){
						this.latitude = item.latitude;
						this.longitude = item.longitude;
						item.width=50;
						item.height = 50;
						// item.iconPath = this.imageTo;
					}else{
						item.width=30;
						item.height=30;
						// item.iconPath= this.image;
					}
				})
			},
			onItemToClick(itemData){
				this.$u.route({
					url: '/mine/home/FitnessStore',
					params: {
						id: itemData.id
					}
				})
				// this.covers.map((item,index)=>{
				// 	if(itemData.id==item.id){
				// 		this.latitude = item.latitude;
				// 		this.longitude = item.longitude;
				// 		item.width=50;
				// 		item.height = 50;
				// 		item.iconPath = this.imageTo;
				// 	}else{
				// 		item.width=30;
				// 		item.height=30;
				// 		item.iconPath= this.image;
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	.pageBgV {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		max-height: 100vh;
		height: auto;
	}

	.centV {
		max-height: 50vh;
		min-height: 30vh;
		background-color: #111;
	}

	.itemV {
		display: flex;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 0.1rpx solid #424242;
	}

	.itemIv {
		height: 150rpx;
		width: 247rpx;
		min-width: 247rpx;
		border-radius: 10rpx;
	}

	.itemRightV {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 30rpx;
	}

	.itemRightVV {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.itemTv1 {
		max-width: 300rpx;
		overflow: hidden;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #E8E8E8;
	}

	.itemCollection {
		min-width: 30rpx;
		width: 30rpx;
		height: 27rpx;
		margin-left: 30rpx;
	}

	.itemAddressV {}

	.itemAddressTv1 {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #E8E8E8;
	}

	.itemAddressTv2 {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #858585;
		margin-left: 10rpx;
		word-break: break-all;
	}
	
	.itemToV{
		width: 95%;
		height: 90%;
		background-color: #333;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		.itemToIv{
			width: 100%;
			height: 250rpx;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
	}
	
	.itemToTv1{
		margin-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		// max-width: 300rpx;
		// overflow: hidden;
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #E8E8E8;
	}
	
	.itemToTvAddress{
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 10rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		.itemToTv2{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #E8E8E8;
		}
		.itemToTv3{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #858585;
			margin-left: 10rpx;
			word-break: break-all;
		}
	}
	
	.backV{
		height: 85rpx;
		width: 90%;
		background-color: #333;
		color: #858585;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}
	.listItemV{
		width: 100%;
		height: 50vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.swiperV{
		width: 100%;
		    height: 70%;
	}
</style>